<template>
  <div style="width: 100%">
    <div class="video">
      <video width="100%" controls autoplay id="video" @ended="end()" @play="play()" @pause="pause()">
        <source :src="url" type="video/mp4" />
      </video>
    </div>
    <!-- 歌手照片以及名字 -->
    <div class="artistsBox" @click="getArt(artistsItem_.artist.id)" v-if="artistsItem_ !== null">
      <img :src="artistsItem_.artist.cover" alt="" />
      <div class="title">{{ artistsItem_.artist.name }}</div>
    </div>

    <div class="name">{{ mvBes.mvBes.data.name }}</div>
    <div class="desc">
      <div style="margin-right: 10px">
        发布:{{ mvBes.mvBes.data.publishTime }}
      </div>
      <div>
        播放:{{
            mvBes.mvBes.data.playCount >= 10000
              ? (mvBes.mvBes.data.playCount / 10000).toFixed(0) + "万"
              : mvBes.mvBes.data.playCount
        }}
      </div>
    </div>

    <!-- 标签 -->
    <div class="tips">
      <el-tag v-for="item in mvBes.mvBes.data.videoGroup" :key="item.id" type="info" effect="plain">
        {{ item.name }}
      </el-tag>
    </div>

    <!-- 点赞 收藏 分享  -->
    <div style="margin-top: 30px">
      <el-button size="medium" @click="like(mvBes.mvBes.data.id)"><i class="el-icon-thumb"></i> 点赞({{
          likedCount
      }})</el-button>
      <el-button size="medium" @click="sub(mvBes.mvBes.data.id)"><i class="el-icon-folder-add"></i>{{ subText }} ({{
          mvBes.mvBes.data.subCount
      }})</el-button>
      <el-button size="medium" @click="share(mvBes.mvBes.data.id)"><i class="el-icon-share"></i> 分享({{
          shareCount
      }})</el-button>
    </div>

    <!----评论---->
    <div class="comment" v-if="infoData !== null">
      <div class="titleBox">
        <div class="title2">评论</div>
        <div class="count">({{ infoData.commentCount }})</div>
      </div>
      <Com />
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  components: {
    Com: () => import('./comment.vue'),
  },
  computed: {
    ...mapState(['mvUrl', 'resMv', 'artistsItem', 'mvBes', 'nowPlaySong']),
  },
  watch: {
    mvBes(newVal, oldVal) {
      if (localStorage.getItem('cookie') !== null) {
        this.ifSub(newVal.mvBes.data.id);
      }
      this.getItem();
      this.info(newVal.mvBes.data.id);
    },
    mvUrl(newVal, oldVal) {
      this.url = newVal.mvUrl;
      document.getElementById('video').load();
    },
    artistsItem(newVal, oldVal) {
      this.artistsItem_ = newVal.artistsItem;
    },
  },
  mounted() {
    // 播放视频自动暂停音乐
    this.url = this.mvUrl.mvUrl;
    if (this.artistsItem !== null) {
      this.artistsItem_ = this.artistsItem.artistsItem;
      document.getElementById('playMusicAudio').pause();
      if (localStorage.getItem('cookie') !== null) {
        this.ifSub(this.mvBes.mvBes.data.id);
      }
    }
    this.info(this.mvBes.mvBes.data.id);
  },
  data() {
    return {
      subText: '收藏',
      infoData: null,
      url: null,
      artistsItem_: null,
      likedCount: 0,
      timer: null,
      shareCount: 0,
    };
  },
  methods: {
    ...mapActions(['saveArtistsItem']),
    // 跳转到歌手页面
    getArt(e) {
      window.sessionStorage.setItem('artists', e);
      this.$router.push(`/artistsPage?id=${e}`);
    },

    // 播放结束时,音乐开始播放
    end() {
      if (this.nowPlaySong !== null) {
        document.getElementById('playMusicAudio').play();
      }
    },

    // 播放开始时,音乐暂停
    play() {
      if (this.nowPlaySong !== null) {
        document.getElementById('playMusicAudio').pause();
      }
    },

    // 播放停止时,音乐开始
    pause() {
      if (this.nowPlaySong !== null) {
        document.getElementById('playMusicAudio').play();
      }
    },

    // 点赞
    async like(e) {
      if (localStorage.getItem('cookie') !== null) {
        this.$api
          .like({
            type: 1, // 点赞MV类型
            id: e,
            cookie: localStorage.getItem('cookie'),
            timestamp: this.$utils.timestamp(),
          })
          .then((ret) => {
            if (ret.code === 200) {
              this.$message({
                message: '点赞成功',
                type: 'success',
              });
              this.likedCount += 1
            }
          });
        this.timer = setTimeout(() => {
          this.info(e)
        }, 1000);
      } else {
        this.$message.error('此操作需要登录');
      }
    },

    // 收藏
    async sub(e) {
      this.$message.error('暂未开发');
      // if (localStorage.getItem("cookie") !== null) {
      //   //在收藏之前先判断一下是否收藏了
      //   this.ifSub(e);
      //   if (this.subText === "已收藏") {
      //     //取消收藏
      //     this.subMv(e, 2);
      //   } else if (this.subText === "收藏") {
      //     //收藏
      //     this.subMv(e, 1);
      //   }
      // } else {
      //   this.$message.error("此操作需要登录");
      // }
    },

    // 分享
    async share(e) {
      if (localStorage.getItem('cookie') !== null) {
        this.$api
          .share({
            id: e,
            type: 'mv',
            cookie: localStorage.getItem('cookie'),
            timestamp: this.$utils.timestamp(),
          })
          .then((ret) => {
            if (ret.code === 200) {
              this.$message({
                message: '分享成功',
                type: 'success',
              });
              this.shareCount += 1
            }
          });
      } else {
        this.$message.error('此操作需要登录');
      }
    },

    // 是否收藏
    async ifSub(e) {
      this.$api
        .subMvList({
          id: e,
          cookie: localStorage.getItem('cookie'),
          timestamp: this.$utils.timestamp(),
        })
        .then((ret) => {
          ret.data.map((item) => {
            if (item.vid === e) {
              this.subText = '已收藏';
            }
          });
        });
    },

    // 收藏MV
    async subMv(e, t) {
      this.$api
        .subMv({ id: e, t, cookie: localStorage.getItem('cookie'), timestamp: this.$utils.timestamp() })
        .then((ret) => {
          if (ret.code === 200) {
            this.$message({
              message: '操作成功',
              type: 'success',
            });
          }
          this.ifSub(e);
        });
    },

    // 获取点赞转发评论数数据
    async info(e) {
      console.log(1111)
      this.$api.detailInfo({ mvid: e, timestamp: this.$utils.timestamp(), cookie: localStorage.getItem('cookie') }).then((ret) => {
        this.infoData = ret;
        this.likedCount = this.infoData.likedCount
        this.shareCount = this.infoData.shareCount
      });
    },

    // 为了切换MV时获取歌手信息
    async getItem() {
      this.$api
        .arDetail({ id: window.sessionStorage.getItem('artists'), cookie: localStorage.getItem('cookie') })
        .then((ret) => {
          this.saveArtistsItem({ artistsItem: ret.data });
        });
    },
  },
};
</script>

<style scoped>
.video {
  width: 100%;
  margin-top: 20px;
}

img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 50%;
}

.title {
  font-size: 20px;
  margin-left: 10px;
}

.artistsBox {
  display: flex;
  align-items: center;
  margin-top: 15px;
  cursor: pointer;
}

.name {
  margin-top: 20px;
  font-size: 30px;
  font-weight: 700;
}

.desc {
  margin-top: 10px;
  display: flex;
  align-items: center;
}

.tips {
  margin-top: 10px;
}

.el-tag {
  margin-right: 5px;
}

.el-button {
  width: 150px;
  border-radius: 20px;
  font-size: 15px;
}

.comment {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}

.titleBox {
  display: flex;
  align-items: center;
  justify-content: left;
}

.title2 {
  font-weight: 700;
  font-size: 20px;
}
</style>
